import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // import locale
import relativeTime from 'dayjs/plugin/relativeTime'
import { createPinia } from 'pinia/dist/pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import hljs from 'highlight.js'
import javascript from 'highlight.js/lib/languages/javascript'
import cpp from 'highlight.js/lib/languages/cpp'
import c from 'highlight.js/lib/languages/c'
import sql from 'highlight.js/lib/languages/sql'
import python from 'highlight.js/lib/languages/python'
import java from 'highlight.js/lib/languages/java'
import 'highlight.js/styles/atom-one-dark.css'
import { lineNumbersBlock } from './assets/highlight-line-number'

hljs.registerLanguage('Java', java)
hljs.registerLanguage('JavaScript', javascript)
hljs.registerLanguage('Python', python)
hljs.registerLanguage('SQL', sql)
hljs.registerLanguage('C语言', c)
hljs.registerLanguage('C++', cpp)

const app = createApp(App)
app.directive('highlight', (el) => {
	const blocks = el.querySelectorAll('pre code')
	blocks.forEach(block => {
		if (block.getAttribute('highlighted') === 'true') {
			return
		}
		block.setAttribute('highlighted', 'true')
		// block.innerHTML="<div><span style='margin-right: 10px;padding: 3px;border: #107ded solid 1px;color:#107ded;border-radius: 5px'>"+ "test"+"</span><button>复制</button>"+block.innerHTML+"</div>"
		hljs.highlightElement(block)
		lineNumbersBlock(block)
	})
	},
)

hljs.addPlugin(
	new CopyButtonPlugin({
		callback: (text, el) => console.log('Copied to clipboard', text),
	}),
)

const pinia = createPinia()
pinia.use(piniaPluginPersist)

app.config.globalProperties.$dayjs = dayjs
dayjs.extend(relativeTime)
dayjs.locale('zh-cn') // use locale

app.use(router).use(pinia).mount('#app')
